<template>
  <view class="cardstyle">
    <slot name="header"></slot>
    <view class="card-content">
      <view class="title-img" style="display: flex; align-items: flex-start;" v-if="mode !== 1">
        <view class="imgbox-duo" v-if="mode === 3">
          <image v-for="(image, index) in imageList"
            :key="index"
            :src="image"
            @error="handleImageException(index)"
            style="width: 60px; height: 70px;"
            mode="aspectFill"
          ></image>
        </view>
		
        <view class="imgbox-dan" v-else-if="mode === 2">
          <image
            :src="showImage"
            @error="handleImageException(0)"
            style="width: 60px; height: 70px; margin-right: 4px;"
            mode="aspectFill"
          ></image>
        </view>
		
        <view style="flex: 1;">
          <text class="titlebox">{{ title }}</text>
        </view>
      </view>
	  
      <view v-else>
        <text class="titlebox">{{ title }}</text>
      </view>
      <view class="tipsbox">
        <text v-if="isTop" style="color: red;">置顶</text>
        <text style="color: #00f;" v-if="mode === 3">广告</text>
        <text class="author" :style="authorColor">{{ author }}</text>
        <text class="comment-count" v-if="mode !== 3">{{ formatNumber(comments) }}评</text>
        <view style="flex: 1; display: flex; justify-content: flex-end;">
          <text>{{ time }}</text>
        </view>
      </view>
    </view>
    <slot name="tips"></slot>
    <slot name="footer"></slot>
  </view>
</template>

<script>
export default {
  name: "cardViewText",
  data() {
    return {
      defaultPic: "/static/news/jiazing.png",
      failPic: "/static/news/fail.png",
      status: "news",
      localImageList: [],
    };
  },
  watch: {
    image: {
      immediate: true,
      handler(newVal) {
        if (Array.isArray(newVal)) {
          this.localImageList = [...newVal];
        } else if (typeof newVal === "string" && newVal.trim()) {
          this.localImageList = [newVal];
        } else {
          this.localImageList = [];
        }
      },
    },
  },
  computed: {
    showImage() {
      return this.localImageList.length > 0
        ? this.localImageList[0]
        : this.defaultPic;
    },
    imageList() {
      return this.localImageList;
    },
    authorColor() {
      const colorMap = {
        news: "#aaa",
        ad: "#00f",
      };
      return { color: colorMap[this.status] || "#f33" };
    },
  },
  mounted() {
    if (this.mode === 3) {
      this.status = "ad";
    }
  },
  methods: {
    handleImageException(index) {
      console.log(`[图片加载失败] 标题:${this.title},索引:${index}`);
      this.$set(this.localImageList, index, this.failPic);
    },
    formatNumber(num) {
      if (isNaN(num)) return 0;
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + "w";
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + "k";
      }
      return num;
    },
  },
  props: {
    title: { type: String, default: "新闻标题", required: true },
    isTop: { type: Boolean, default: false },
    author: { type: String, default: "来源" },
    comments: { type: Number, default: 0 },
    time: { type: String, default: "未知时间" },
    mode: { type: Number, default: 1, validator: (v) => [1, 2, 3].includes(v) },
    image: { type: [String, Array], default: () => [] },
  },
};
</script>

<style scoped>
.cardstyle {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 12px;
  margin: 8px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.titlebox {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}
.tipsbox {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999;
  flex-wrap: wrap;
}
.tipsbox text {
  margin-right: 8px;
  margin-bottom: 4px;
}
.imgbox-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
  margin-right: 10px;
}
.imgbox-dan {
  flex-shrink: 0;
  margin-right: 10px;
}
</style>